<style>
    .showJstree span {
        cursor: pointer;
        font-size: 13px;
    }

    .jstree-default .jstree-icon:empty {
        width: 24px;
        height: 24px;
    }

    .jstree-default .jstree-anchor {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .card.category, .card.card-primary {
        height: 100%;
    }

    .r-ifm {
        width: 100%;
        height: 100%;
    }

    .content, .container-fluid {
        height: 100%;
    }

    .csbtn-l {
        width: 14px;
        height: 26px;
        background-color: #007bff;
        color: #ffffff;
        text-align: center;
        line-height: 26px;
        position: absolute;
        top: 50%;
        right: 8px;
        cursor: pointer;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        z-index: 2;
    }

    .csbtn-r {
        width: 14px;
        height: 26px;
        background-color: #007bff;
        color: #ffffff;
        text-align: center;
        line-height: 26px;
        position: absolute;
        top: 50%;
        left: -7px;
        cursor: pointer;
        display: none;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .jstree-default .jstree-disabled {
        cursor: not-allowed;
    }

    .openAll {
        padding-left: 6px;
    }
</style>
<div class="row" style="height: 100%">
    <div class="col-md-2 col-12" style="height: 100%;" id="left-p">
        <div class="card category" style="overflow-x: hidden;overflow-y: auto">
            <div class="card-header">
                <div class="card-header-title">栏目列表</div>
                <div class="card-header-operate">
                    <button class="btn btn-secondary btn-xs float-right" onclick="getCategory()" type="button" name="refresh" aria-label="Refresh" title="{:lang('Refresh')}"><i class="fa fa-sync"></i></button>
                </div>
            </div>
            <div class="card-body" style="padding: 10px 16px 16px 8px">
                <p class="showJstree mb-2">
                    <span class="openAll"><i class="fas fa-minus"></i> 全部展开</span>
                </p>
                <div class="frm-category"></div>
            </div>
        </div>

        <div class="csbtn-l"><span><i class="fa fa-angle-left"></i></span></div>
    </div>
    <div class="col-md-10 col-12" id="right-p">
        <div class="card card-primary">
            <div class="card-body" style="padding: 0;height: 100%">
                <div id="toolbar" class="toolbar">
                    <button type="button" class="btn btn-default btn-import"><i class="fas fa-print"></i> Excel导入</button>
                    <div class="dropdown btn-toggle" data-toggle="tooltip" data-placement="right" data-title="点击表格行进行批量操作">
                        <a class="btn btn-secondary dropdown-toggle btn-disabled disabled" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{:lang('Batch operation')}"><i class="fas fa-cog"></i> {:lang('More')}</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item btn-export" href="#"><i class="fas fa-copy"></i>数据导出</a>
                        </div>
                    </div>
                </div>
                <table id="table" data-popup="false"></table>
            </div>
        </div>
        <div class="csbtn-r"><span><i class="fa fa-angle-right"></i></span></div>
    </div>
</div>

{block:script}
<input type="hidden" id="category_id" value="0">
<input type="hidden" id="model_id" value="0">
<input type="hidden" id="controller" value="0">
<script>
    require(['admin', 'jstree', 'table'], function (admin, jstree, Table) {
        $(function () {
            getCategory();

            let bl = false;
            $('.openAll').click(function (e) {
                $(".frm-category").jstree(bl === true ? "open_all" : "close_all");
                if (bl) {
                    $('.openAll').html('<i class="fas fa-minus"></i>全部展开');
                } else {
                    $('.openAll').html('<i class="fas fa-plus"></i>全部收起');
                }
                bl = !bl;
            });
            $('.category').overlayScrollbars({
                scrollbars: {autoHide: "leave"}
            });
        })

        $('.csbtn-l').click(function (e) {
            $('#left-p').hide();
            $('#right-p').removeClass().addClass('col-md-12');
            $('.csbtn-r').show();
        })

        $('.csbtn-r').click(function (e) {
            $('#left-p').show();
            $('.csbtn-r').hide();
            $('#left-p').removeClass().addClass('col-md-2');
            $('#right-p').removeClass().addClass('col-md-10');
        })


        var table = Table.init({
            sortName: 'weigh asc,publish_time desc',
            customFilter: true,
            columns: [{
                field: 'state',
                checkbox: true,
            }, {
                field: 'id',
                title: 'ID'
            }, {
                field: 'title',
                title: '{:lang("标题")}',
                align: 'left',
                formatter: function (value, row, index) {
                    var html = '';
                    return '<a class="basestyle" href="' + row['url'] + '" target="_blank" style="' + row['style'] + '">' + value + html + '</a>';
                }
            }, {
                field: 'category_title',
                title: '{:lang("所属栏目")}'
            }, {
                field: 'thumb',
                title: '{:lang("封面图")}',
                formatter: Table.formatter.image,
                events: Table.events.image,
                visible: true,
            }, {
                field: 'publish_time_text',
                title: '{:lang("发布时间")}'
            }, {
                field: 'status',
                title: '{:lang("Status")}',
                formatter: function (value, row, index) {
                    if (value == 'normal') {
                        return lang(value);
                    } else if (value == 'reject') {
                        return '<span class="text-danger">' + lang(value) + '</span>';
                    } else if (value == 'audit') {
                        return '<span class="text-warning">' + lang(value) + '</span>';
                    } else if (value == 'hidden') {
                        return '<span class="text-dark">' + lang(value) + '</span>';
                    } else {
                        return value;
                    }
                }
            }]
        });
        //excel导入
        $('.btn-import').click(function (e) {
            var model_id = $('#model_id').val()
            var category_id = $('#category_id').val()
            var controller = $('#controller').val()
            if (controller == 0) {
                layer.msg('表单类控制器暂时不支持此功能');
                return false;
            }

            layer.open({
                type: 1,
                title: 'Excel数据导入',
                content: `<form id="fileForm" action="{:url('/excels.excels/import')}" method="post" enctype="multipart/form-data" style="margin: 10px">
                                <input id="file" type="file" required="required" name="file">
                            </form>`,
                btn: ['模板下载', '数据导入'],
                yes: function (index, layero) {
                    layer.load(2)
                    $.get("{:url('/excels.excels/exportDome')}", {'model_id': model_id, 'category_id': category_id}, function (res) {
                        layer.closeAll();
                        if (res.code == 200) {
                            layer.closeAll();
                            layer.msg('开始下载模板文件');
                            window.location.href = res.data['url'];
                        } else {
                            layer.alert(res.msg, {icon: 5});
                        }
                    }, 'json');
                }, btn2: function (index, layero) {
                    var fileInput = $('#file').get(0).files[0];
                    if (fileInput) {
                        $("#fileForm").submit();
                    } else {
                        layer.msg("请选择Excel文件！");
                    }
                    return false;
                }
            });
        });

        $('.btn-export').click(function (res) {
            var ids = Table.api.getSelectionsId(table, true);
            var model_id = $('#model_id').val()
            var category_id = $('#category_id').val()
            var controller = $('#controller').val()
            if (controller == 0) {
                layer.msg('表单类控制器暂时不支持此功能');
                return false;
            }
// console.log(ids,model_id,category_id);
            layer.open({
                title: '数据导出',
                content: "前端导出数据为Excel文件？",
                btn: ['确定'],
                yes: function (index, layero) {
                    layer.load(2)
                    $.post("{:url('/excels.excels/export')}", {ids: ids, 'model_id': model_id, 'category_id': category_id}, function (res) {
                        layer.closeAll();
                        if (res.code == 200) {
                            layer.closeAll();
                            layer.msg('开始下载Excel文件');
                            window.location.href = res.data['url'];
                        } else {
                            layer.alert(res.msg, {icon: 5});
                        }
                    }, 'json');
                }, btn2: function (index, layero) {
                    // layer.load(2)
                    // $.post("{:url('/excels.excels/exportFile')}", {ids: ids}, function (res) {
                    //     layer.closeAll();
                    //     if (res.code == 200) {
                    //         layer.closeAll();
                    //         layer.msg('开始下载压缩文件文件');
                    //         window.location.href = res.data['url'];
                    //     } else {
                    //         layer.alert(res.msg, {icon: 5});
                    //     }
                    // }, 'json');
                    // return false;
                }
            });
        });

    })


    function getCategory() {
        $.get("{:request()->url()}?action=1", '', function (data) {
            // 默认选择是模型的链接
            var checked = '';
            $('.frm-category').jstree("destroy");
            $('.frm-category').jstree({"core": {"data": data, "multiple": false}, "state": {"opened": true}}).on('loaded.jstree', function (e, data) {
                var inst = data.instance;
                inst.select_node(checked);
            });

            $('.frm-category').on('changed.jstree', function (e, data) {
                var data = data.node.original
                var model_id = data['model_id'];
                var category_id = data['id'];
                var controller = data['controller'];
                $('#model_id').val(model_id)
                $('#category_id').val(category_id)
                $('#controller').val(controller)

                if (controller == '1') {
                    $('#table').bootstrapTable('refresh', {
                        url: `{:request()->url()}?action=2&model_id=${model_id}&category_id=${category_id}`
                    })
                } else {
                    layer.msg('表单类控制器暂时不支持此功能');
                }
            });
        });
        return false;
    }

</script>
{/block:script}